/**
 * @typedef {Object} Item
 * @property {Number} id
 * @property {String} title
 * @property {Boolean} done
 */

const input = document.querySelector("input");
const button = document.querySelector("button");
const list = document.querySelector("ul");
const p = document.querySelector("p");

// const url = "./data/todo.json";
const url = "http://localhost:3030/list";

//页面加载完成后载入数据
document.addEventListener("DOMContentLoaded", getData((msg, data) => {
    p.textContent = msg;
    // let todoList = data.list;
    let todoList = data;
    if (todoList.length > 0) {
        for (let i = 0; i < todoList.length; i++) {
            createTodoItem(todoList[i]);
        }
    }
}));

//新增事件处理
button.addEventListener("click", () => {
    const myItem = input.value;
    input.value = "";

    let item = {
        id: Date.now(),
        title: myItem,
        done: false
    };

    addItem(item, (msg) => {
        p.textContent = msg;
    });
    
    createTodoItem(item);

    input.focus();
})


/**
 * 
 * @param {Function} cb 
 */

function getData(cb) {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();

    xhr.onload = function () {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            cb("数据获取完成！", data);
        } else {
            cb("数据无法获取...", null);
        }
    };

    xhr.onerror = function () {
        cb("网络访问异常...", null);
    }
}

/**
 * 
 * @param {Item} item 
 * @param {Function} cb 
 */
function addItem(item, cb) {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", url);  //RESTful风格中的POST HTTP方法新增数据
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(item));

    xhr.onload = function () {
        if (xhr.status === 201) {
            let data = JSON.parse(xhr.responseText);
            cb("数据添加完成...", null);
        } else {
            cb("数据服务无法访问...", null);
        }
    };

    xhr.onerror = function () {
        cb("网络访问异常...", null);
    }
}

/**
 * 
 * @param {Item} item 
 * @param {Function} cb 
 */
function removeItem(item, cb) {
    let xhr = new XMLHttpRequest();
    xhr.open("PATCH", `${url}/${item.id}`);  //RESTful风格中的PATCH HTTP方法部分修改数据
    xhr.setRequestHeader("content-type", "application/json");
    item.done = true;
    xhr.send(JSON.stringify(item));

    xhr.onload = function () {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            cb("数据修改完成...", null);
        } else {
            cb("数据服务无法访问...", null);
        }
    };

    xhr.onerror = function () {
        cb("网络访问异常...", null);
    }
}

/**
 * 
 * @param {Item} item 
 */
function createTodoItem(item) {
    const listItem = document.createElement("li");
    const listText = document.createElement("span");
    const listBtn = document.createElement("button");

    listText.textContent = item.title;
    listItem.appendChild(listText);

    listBtn.textContent = "删除";
    listItem.appendChild(listBtn);
    listBtn.addEventListener("click", () => {
        listItem.classList.add("done");
        removeItem(item, (msg) => {
            p.textContent = msg;
        });
    });

    if (item.done) {
        listItem.classList.add("done")
    }

    list.append(listItem);
}